<template>
  <div class="zeda-grid" :class="columnClass" :style="flexBasis">
    <div v-for="(item, index) in data" :key="index" class="zeda-grid-item" :class="columnItemClass">
      <div v-if="label" :style="style" :class="elInfo.size" class="zeda-grid-label">{{ label }}{{ spec }}</div>
      <div :style="styleColor" :class="[elInfo.size, noWrap ? 'no-wrap' : '']" class="zeda-grid-value">
        <slot :row="item">
          <template v-if="['list', 'col-list'].includes(valueType)">
            <label-item
              :props="props"
              :item="formatField(item, prop)"
              :type="type"
              :unit="unit"
              :link="link"
              :value-type="valueType"
            ></label-item>
          </template>
          <template v-else>
            <label-text
              :link="link"
              :value="value"
              :empty-text="emptyText"
              :prop="prop"
              :item="{ ...item, callback: callback }"
              :type="type"
              :unit="unit"
            ></label-text>
          </template>
        </slot>
      </div>
    </div>
  </div>
</template>
<script>
import LabelText from '@/components/DescInfoListItem/label';
import LabelItem from '@/components/DescInfoListItem/item';
import { getRowIdentity } from '@/utils/index';
export default {
  components: {
    LabelText,
    LabelItem,
  },
  props: {
    /*
     * 显示字段名称
     */
    prop: { type: String, default: '' },
    /*
     * 显示数组或对象的字段 [{key字段名，color颜色, size字号, noWrap是否换行}]
     */
    props: { type: Array, default: () => [] },
    /*
     * 名称
     */
    label: { type: String, default: '' },
    /*
     * 是否连接 {path, query}
     */
    link: { type: Object, default: () => {} },
    /*
     * 名称宽度
     */
    labelWidth: { type: String, default: '' },
    /*
     * 一行显示列数
     */
    columnNum: { type: [Number, String], default: '' },
    /*
     * 字体颜色
     */
    color: { type: String, default: '' },
    size: { type: String, default: 'small' },
    /*
     * 名称颜色
     */
    labelColor: { type: String, default: '' },
    styleLabel: { type: Object, default: () => {} },
    /*
     * 外部样式插入
     */
    columnClass: { type: String, default: '' },
    /*
     * 外部列样式插入
     */
    columnItemClass: { type: String, default: '' },
    /*
     * 分隔符
     */
    spec: { type: String, default: '：' },
    /*
     * 单位
     */
    unit: { type: String, default: '' },
    /*
     * 传入值
     */
    value: { type: [Number, String], default: '' },
    /*
     * 为空时显示文字
     */
    emptyText: { type: String, default: '' },
    /*
     * 格式化值类型
     */
    type: { type: String, default: 'text' },
    /*
     * 模板类型
     */
    valueType: { type: String, default: 'text' },
    /*
     * 是否换行
     */
    noWrap: { type: Boolean, default: false },
    callback: { type: [String, Function], default: '' },
  },
  inject: ['elInfo'],
  data() {
    return {
      data: [],
    };
  },
  computed: {
    flexBasis() {
      return {
        flexBasis: `${100 / (this.columnNum || this.elInfo.columnNum)}%`,
      };
    },
    style() {
      const width = this.labelWidth || this.elInfo.labelWidth;
      return {
        ...this.styleLabel,
        width: Number(width) ? width + 'px' : width,
        textAlign: this.elInfo.align,
        color: this.labelColor,
      };
    },
    styleColor() {
      return {
        color: this.color,
        fontSize: this.size,
      };
    },
  },
  watch: {
    'elInfo.data'() {
      this.resetData();
    },
  },
  mounted() {
    this.resetData();
  },
  methods: {
    formatField(item, filed) {
      return getRowIdentity(item, filed);
    },
    resetData() {
      if (this.elInfo.data && !Array.isArray(this.elInfo.data)) {
        this.data = [this.elInfo.data];
      } else if (this.elInfo.data) {
        this.data = [...this.data, ...this.elInfo.data];
      } else {
        this.data = [{}];
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.flex-start {
  align-items: flex-start !important;
  line-height: 20px;
}
.zeda-grid {
  box-sizing: border-box;
  &-item {
    padding: 0 8px 16px !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  &-label {
    display: inline-block;
    flex-shrink: 0;
    font-weight: normal;
  }
  &-value {
    width: 100%;
    flex-shrink: 1;
  }
  .no-wrap {
    white-space: nowrap;
    width: 100%;
  }
}

.medium {
  font-size: 14px;
}
.small {
  font-size: 12px;
}
.mini {
  font-size: 10px;
}
</style>
